<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			#jd{
				width: 590px;
				height: 470px;
				border: 5px solid blue;
				margin: 20px auto;
				position: relative;
			}
			#jd img{
				position: absolute;
				top: 0;
				left: 0;
				display: none;
			}
			#jd ul{
				position: absolute;
				left: 52px;
				bottom: 24px;
			}
			#jd ul li{
				list-style: none;
				width: 12px;
				height: 12px;
				background: #DDDDDD;
				float: left;
				margin: 8px;
				/*圆角border-radius*/
				border-radius: 50%;
			}
		</style>
		
		<script>
			/*//注意：多个方式控制同一块元素效果的时候，一定要走同一个变量
			window.onload=function(){
				var jd=document.getElementById("jd");
				var imgs=jd.getElementsByTagName('img');
				var lis=jd.getElementsByTagName('li');
				
				var c=0;//大总管变量
				//控制图片切换的函数
				function run(){
						c++;
						if(c==8){
							c=0;
						}
						//循环，让所有的图片隐藏，让所有的li变灰
						for(var i=0;i<8;i++){
							imgs[i].style.display='none';
							lis[i].style.background="#DDDDDD";
						}
						//让C号图片显示，C号li变白
						imgs[c].style.display='block';
						lis[c].style.background='white';
				}
				var timer=setInterval(run,1000);
				//循环，给li加事件
				for(var i=0;i<lis.length;i++){
					//给i号li加序号
					lis[i].xuhao=i;
					//给i号li加鼠标移入事件
					lis[i].onmouseover=function(){
						c=this.xuhao;
						//停止定时器
						clearInterval(timer);
						//循环，让所有的图片隐藏，让所有的li变灰
						for(var i=0;i<8;i++){
						imgs[i].style.display='none';
						lis[i].style.background="#DDDDDD";
						}
						//让c对应的图片显示
						imgs[c].style.display='block';
						lis[c].style.background='white';
					}
					//移入事件结束
					//移出事件
					lis[i].onmouseout=function(){
						timer=setInterval(run,1000);
					}
					//移出事件结束
				}//for
			}*/
			
		</script>
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		<script>
			$(function (){
				//大总管变量
				var c=0;
				function run(){
					c++;
					c=(c==8)?0:c;
					//让c号图片显示，兄弟图片隐藏
					//$("#jd img").eq(c).show();
					//$("#jd img").eq(c).siblings('img').hide();
					//链式操作
					//$("#jd img").eq(c).show().siblings('img').hide();
					$("#jd img").eq(c).fadeIn(400).siblings('img').fadeOut(400);
					$("#jd ul li").eq(c).css({'background':'#DDDDDD'}).siblings('li').css({'background':'white'});
				}
					//设置定时器自动轮播
					var timer=setInterval(run,1000);
					//移入事件：mouseover=>mouseenter
//								mouseout=>mouseleave
					//给li加鼠标移入事件
					$("#jd ul li").mouseenter(function(){
						var jqthis=$(this);
						//停止定时器
						clearInterval(timer);
						//如果$(this)写在定时器里，那么$(this)指向的就是定时器而不是li
						tt=setTimeout(function(){
							//当前移入li的序号
							//c=$(this).index();  写法错误，正确如下
							c=jqthis.index();
							//让c号元素显示，兄弟元素隐藏
							$("#jd img").eq(c).stop().fadeIn(400).siblings('img').stop().fadeOut(400);
							$("#jd ul li").eq(c).css({'background':'#DDDDDD'}).siblings('li').css({'background':'white'});	
						},200)
					})
					//给li加移出事件
					$("#jd ul li").mouseleave(function(){
						//清理定时炸弹
						clearTimeout(tt);
						//恢复定时器
						timer=setInterval(run,1000);
					})
			})
		</script>
	</head>
	<body>
		<div id="jd">
			<img src="img/11.jpg" style="display:block;"/>
			<img src="img/12.jpg" />
			<img src="img/13.jpg" />
			<img src="img/14.jpg" />
			<img src="img/15.jpg" />
			<img src="img/16.jpg" />
			<img src="img/17.jpg" />
			<img src="img/18.jpg" />
			<ul>
				<li style='background: white;'></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>
